<template>
  <div class="tag">
    <el-row :gutter="20">
      <el-col :span="4"
        ><el-input v-model="tag_name" placeholder="标签名称"></el-input
      ></el-col>
      <el-col :span="4"
        ><el-select v-model="subject_name" placeholder="归属学科">
          <el-option
            v-for="(item, index) in str"
            :key="index"
            :label="item"
            :value="item"
            @click.native="getTrigger(index)"
          ></el-option> </el-select
      ></el-col>
      <el-col :span="4"
        ><el-select v-model="directory_name" placeholder="归属目录">
          <el-option
            v-for="item in data"
            :key="item.id"
            :label="item.name"
            :value="item.name"
            @click.native="tianmu(item.id)"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="4"
        ><el-select v-model="is_show" placeholder="显示状态">
          <el-option label="全部" value=""></el-option>
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="2"></el-option>
        </el-select>
      </el-col>
      <el-col :span="2" :offset="0">
        <el-button type="primary" plain @click="getSearch"
          >搜索</el-button
        ></el-col
      >
      <el-col :span="2" :offset="0">
        <el-button type="primary" plain>重置</el-button></el-col
      >
      <el-col :span="2" :offset="1">
        <el-button type="primary" plain @click="getCreate"
          >创建标签</el-button
        ></el-col
      >
    </el-row>
    <!-- 表单 -->
    <div class="table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="" type="index" label="序号"> </el-table-column>
        <el-table-column prop="tag_name" label="标签名称"> </el-table-column>
        <el-table-column prop="directory_name" label="归属目录">
        </el-table-column>
        <el-table-column prop="subject_name" label="归属学科">
        </el-table-column>
        <el-table-column prop="username" label="创建人"> </el-table-column>
        <el-table-column prop="address" label="是否显示">
          <template slot-scope="{ row }">
            <el-switch
              :value="row.is_show === 1"
              active-text="是"
              inactive-text="否"
              @change="getUserModify(row.id, row.is_show)"
            >
            </el-switch
          ></template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="Modify(row.id, row.subject_name, row.directory_name)"
              circle
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="getDelete(row.id)"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-col :span="4" :offset="12">
      <div class="block">
        <!-- <span class="demonstration">完整功能</span> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.page"
          :page-sizes="[ 10, 15, 20,25]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-col>
    <!-- 分页 -->
    <!-- 弹窗 -->
    <el-dialog title="添加管路员" :visible="showDialog" @close="btnCancel">
      <el-form
        ref="roleForm"
        :model="roleForm"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="归属学科" prop="subject_name">
          <el-select v-model="roleForm.subject_name" placeholder="归属学科">
            <el-option
              v-for="(item, index) in str"
              :key="index"
              :label="item"
              :value="item"
              @click.native="getTrigger(index)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="归属目录" prop="directory_name">
          <el-select v-model="roleForm.directory_name" placeholder="归属目录">
            <el-option
              v-for="item in data"
              :key="item.id"
              :label="item.name"
              :value="item.name"
              @click.native="tianmu(item.id)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签名称" prop="tag_name">
          <el-input
            placeholder="标签名称"
            v-model="roleForm.tag_name"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="phone">
          <el-input-number v-model="num" :step="1"></el-input-number>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            :value="roleForm.status === 1"
            active-text="启用"
            inactive-text="禁用"
            @change="bb"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <!-- 底部 -->
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="btnCancel">取消</el-button>
          <el-button size="small" type="primary" @click="btnOK">确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 弹窗 -->
  </div>
</template>

<script>
import {
  getData,
  getDiscipline,
  getModify,
  getAddUser,
  getDelete,
  getUserModify,
  getSearch,
  sousuo,
} from "@/api/subject";
export default {
  name: "tag",
  data() {
    return {
      total: "",
      id: "",
      tianxuede: null,
      tianmude: null,
      showDialog: false,
      num: 10,
      tag_name: "",
      // 分页
      page: {
        role_name: "",
        page: 1,
        limit: 10,
      },
      value: true,
      tableData: [],
      str: [],
      arr: [],
      data: [],
      directory_name: "",
      tag_name: "",
      subject_name: "",
      is_show: "",
      roleForm: {
        subject_name: "",
        directory_name: "",
        tag_name: "",
        is_show: 2,
      },
      rules: {
        subject_name: [
          { required: true, message: "内容不能为空", trigger: "blur" },
        ],
        directory_name: [
          { required: true, message: "内容不能为空", trigger: "blur" },
        ],
        tag_name: [
          { required: true, message: "内容不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getData();
    this.getDiscipline();
    this.tioazhuan();
  },
  methods: {
    // 舔砖
    async tioazhuan() {
      const directory_id = this.$route.query.directory_id;
      const str = {
        page: 1,
        limit: 10,
        directory_id: directory_id,
      };
      const data = await sousuo(str);
      this.tableData = data.list;
      // console.log(str);
    },
    // 搜索
    async getSearch() {
      const arr = {
        is_show: this.is_show,
        directory_id: this.tianmude,
        subject_id: this.tianxuede,
        tag_name: this.tag_name,
        page: 1,
        limit: 20,
      };
      const data = await getSearch(arr);
      // console.log(data);
      this.tableData = data.list;
    },
    // 开关
    async getUserModify(id, value) {
      const status = value === 1 ? 2 : 1;
      const data = { is_show: status, id: id };
      await getUserModify(id, data);
      this.getData();
      this.$message.success("更新成功");
    },
    bb() {
      this.roleForm.status = this.roleForm.status === 1 ? 2 : 1;
    },
    async handleSizeChange(val) {
      const str = {
        subject_id: "",
        directory_id: "",
        tag_name: "",
        is_show: "",
        page: 1,
        limit: val,
      };
      const data = await getData(str);
      this.tableData = data.list;
      this.total = data.total;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 获取数据
    async getData() {
      const str = {
        subject_id: "",
        directory_id: "",
        tag_name: "",
        is_show: "",
        page: 2,
        limit: 10,
      };
      const data = await getData(str);
      this.tableData = data.list;
      // console.log(data);
    },
    async getDiscipline() {
      const data = await getDiscipline();
      // console.log(data);
      this.arr = data;
      const str = [];
      data.forEach((item) => {
        str.push(item.name);
      });
      this.str = str;
      // console.log(str);
    },
    btnCancel() {
      this.showDialog = false;
    },
    //添加
    async btnOK() {
      if (!this.id) {
        try {
          this.roleForm.is_show = this.is_show === 1 ? 1 : 2;
          const data = {
            is_show: this.roleForm.is_show,
            directory_id: this.tianmude,
            subject_id: this.tianxuede,
            sort: this.num,
            tag_name: this.roleForm.tag_name,
          };

          await getAddUser(data);
          this.showDialog = false;
          this.$message.success("添加成功");
          this.getData();
        } catch (error) {
          this.$message.error("添加失败");
        }
      } else {
        try {
          this.roleForm.is_show = this.is_show === 1 ? 1 : 2;
          const data = {
            is_show: this.roleForm.is_show,
            directory_id: this.tianmude,
            subject_id: this.tianxuede,
            sort: this.num,
            tag_name: this.roleForm.tag_name,
            id: this.id,
            updated: new Date(),
          };

          await getAddUser(data);
          this.showDialog = false;
          this.$message.success("修改成功");
        } catch (error) {
          this.$message.error("修改失败");
        }
      }
    },
    // 创建
    getCreate() {
      this.showDialog = true;
      this.roleForm = {
        subject_name: "",
        directory_name: "",
        tag_name: "",
        is_show: 2,
      };
    },
    // 修改
    async Modify(id, name, subject_name) {
      this.id = id;
      this.showDialog = true;
      const data = await getModify(id);
      this.roleForm.directory_name = name;
      this.roleForm.subject_name = subject_name;
      this.roleForm.tag_name = data.tag_name;
      this.roleForm.is_show = data.is_show;
      console.log(data);
    },
    // 联动
    getTrigger(id) {
      // console.log(111);

      console.log(id);
      this.arr[id].children.forEach((item) => {
        this.data.push(item);
      });

      console.log(this.data);
    },

    tianmu(id) {
      this.tianmude = id;
    },
    // 删除
    async getDelete(id) {
      this.$confirm("此操作将永久删除该管理员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await getDelete(id);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style>
.table {
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>
